<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script type="text/x-template" id="myComponent">
        <div>总共{{ myMessage }}个事项,{{done}}个已完成,{{myMessage-done}}个未完成</div>
    </script>
    <script>
        window.onload=function(){
            Vue.component('temp', {
                // camelCase in JavaScript
                props: ['myMessage','done'],
                template: "#myComponent"
            })

            var vm=new Vue({
                el: '#example-3',
                data: {
                    thing:null,
                    todos: [{name:'吃饭',done:false},
                            {name:'睡觉',done:false},
                            {name:'学习',done:true}]
                },
                methods: {
                    addthing: function () {
                        this.todos.push({name:this.thing,done:''})
                    },
                    switchcheck:function (index) {
                        this.todos[index].done=!this.todos[index].done;
                    },

                },
                computed:{
                    calculate:function(){

                        var a=0;
                        for(var i=0;i<this.todos.length;i++){
                            if(this.todos[i].done){
                                a++;
                            }
                        }
                        return a;
                    }
                }
            })
        }
    </script>
    <style>
        .del{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<div id='example-3'>
    <input type="text" v-model="thing" >
    <button v-on:click="addthing" >添加</button>
    <div  v-for="(todo,index) in todos">
        <input type="checkbox" v-on:click="switchcheck(index)" v-bind:checked="todo.done">{{index+1}}.
        <span v-bind:class="{del:todo.done}">{{todo.name}}</span>

    </div>
    <temp  v-bind:my-message="todos.length" v-bind:done="calculate"></temp>

</div>
</body>
</html>